<template>
  <div class="index-container">
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">年就诊老人数量统计</h3>
            <el-date-picker
              v-model="year1"
              type="month"
              :editable="false"
              placeholder="选择年月"
              class="fr"
              value-format="yyyy-MM"
              @change="handleChange"
            ></el-date-picker>
          </div>
          <div>
            <vab-chart
              ref="chart1"
              autoresize
              :options="chart1"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">年疾病治疗人数统计</h3>
            <el-date-picker
              v-model="year1"
              type="month"
              :editable="false"
              placeholder="选择年月"
              class="fr"
              value-format="yyyy-MM"
              @change="handleChange"
            ></el-date-picker>
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart2"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">年慢性病人数统计</h3>
            <el-date-picker
              v-model="year1"
              type="month"
              :editable="false"
              placeholder="选择年月"
              class="fr"
              value-format="yyyy-MM"
              @change="handleChange"
            ></el-date-picker>
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart3"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">年康复训练人数和次数统计</h3>
            <!-- <el-dropdown class="fr" @command="handleCommand">
              <span class="el-dropdown-link">
                今天
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">今天</el-dropdown-item>
                <el-dropdown-item command="b">七天</el-dropdown-item>
                <el-dropdown-item command="c">一个月</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
            <el-date-picker
              v-model="year1"
              type="month"
              :editable="false"
              placeholder="选择年月"
              class="fr"
              value-format="yyyy-MM"
              @change="handleChange"
            ></el-date-picker>
          </div>

          <div>
            <vab-chart
              autoresize
              :options="chart4"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">安宁服务人次</h3>
            <el-date-picker
              v-model="year1"
              type="month"
              :editable="false"
              placeholder="选择年月"
              class="fr"
              value-format="yyyy-MM"
              @change="handleChange"
            ></el-date-picker>
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart5"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">心理慰藉人次</h3>
            <el-date-picker
              v-model="year1"
              type="month"
              :editable="false"
              placeholder="选择年月"
              class="fr"
              value-format="yyyy-MM"
              @change="handleChange"
            ></el-date-picker>
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart6"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import VabChart from "@/plugins/echarts";
  import { getMedicineData } from "@/api/diseaseApi";
  export default {
    name: "Index",
    components: {
      VabChart,
    },
    data() {
      return {
        year1: "",
        chart1: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: ["疾病治疗", "慢性病", "康复训练", "心理慰藉", "安宁服务"],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "次数",
              type: "bar",
              barWidth: 32,
              itemStyle: {
                color: "#FCD438",
              },
              data: [],
            },
          ],
        },
        chart2: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: [],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "人",
              type: "bar",
              barWidth: 10,
              color: "#1791FF",
              data: [10, 52, 200, 334, 390, 330, 220, 200, 334, 555, 366, 412],
            },
          ],
        },
        chart3: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: [],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "人",
              type: "bar",
              barWidth: 10,
              color: "#4DCC73",
              data: [],
            },
          ],
        },
        chart4: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "人数",
              type: "bar",
              barWidth: 25,
              color: "#FCD438",
              stack: "康复训练",
              data: [],
            },
            {
              name: "次数",
              type: "bar",
              barWidth: 25,
              stack: "康复训练",
              color: "#1791FF",
              data: [],
            },
          ],
        },
        chart8: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            show: true,
            formatter: "{b} : {c}人",
          },
          legend: {
            //图例
            orient: "horizontal", //图例的布局，竖直    horizontal为水平
            x: "center", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: ["自理型", "介助型", "介护型", "特护型"],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "占比",
              type: "pie", //环形图的type和饼图相同
              radius: ["55%", "85%"], //饼图的半径，第一个为内半径，第二个为外半径
              center: ["50%", "55%"],
              avoidLabelOverlap: false,
              color: ["#1791FF", "#FF8183", "#4DCC73", "#FCD438"],
              label: {
                normal: {
                  //正常的样式
                  position: "inner",
                  show: true,
                  formatter: "{b} \n {c} ({d}%)",
                },
                emphasis: {
                  // 选中时候的样式
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold",
                  },
                },
              }, //提示文字
              labelLine: {
                normal: {
                  show: true,
                },
              },
              data: [
                {
                  value: 335,
                  name: "自理型",
                },
                {
                  value: 310,
                  name: "介助型",
                },
                {
                  value: 234,
                  name: "介护型",
                },
                {
                  value: 135,
                  name: "特护型",
                },
              ],
            },
          ],
        },
        chart7: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            show: true,
            formatter: "{b} : {c}人",
          },
          legend: {
            //图例
            orient: "vertical", //图例的布局 vertical，竖直    horizontal为水平
            x: "left", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: [
              "肢体康复",
              "行为康复",
              "语言康复",
              "记忆康复",
              "血栓后遗症康复",
            ],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "Line 5",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["80%", "90%"],
              center: ["60%", "50%"],
              color: "#EA82F1",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 7645434,
                  name: "肢体康复",
                },
                {
                  value: 3612343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 4",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["65%", "75%"],
              center: ["60%", "50%"],
              color: "#FF787F",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 7645434,
                  name: "行为康复",
                },
                {
                  value: 3612343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 3",
              type: "pie",
              clockWise: true,
              radius: ["50%", "60%"],
              center: ["60%", "50%"],
              color: "#FFAE67",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              hoverAnimation: false,

              data: [
                {
                  value: 2632321,
                  name: "语言康复",
                },
                {
                  value: 2212343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 2",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["35%", "45%"],
              center: ["60%", "50%"],
              color: "#FCD438",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 1823323,
                  name: "记忆康复",
                },
                {
                  value: 1812343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 1",
              type: "pie",
              clockWise: true,
              color: "#B1B1B1",
              radius: ["20%", "30%"],
              center: ["60%", "50%"],
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              hoverAnimation: false,

              data: [
                {
                  value: 1342221,
                  name: "血栓后遗症康复",
                },
                {
                  value: 1912343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
          ],
        },
        chart5: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          legend: {
            //图例
            orient: "horizontal", //图例的布局 vertical，竖直    horizontal为水平
            x: "center", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: ["临终关怀", "死亡恐惧", "精神慰藉"],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "占比",
              type: "pie", //环形图的type和饼图相同
              radius: ["55%", "85%"], //饼图的半径，第一个为内半径，第二个为外半径
              center: ["50%", "55%"],
              avoidLabelOverlap: false,
              color: ["#EA82F1", "#FF787F", "#B1B1B1", "#FCD438", "#EA82F1"],
              label: {
                normal: {
                  //正常的样式
                  position: "inner",
                  show: true,
                  formatter: "{b} \n {c} ({d}%)",
                },
                emphasis: {
                  // 选中时候的样式
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold",
                  },
                },
              }, //提示文字
              labelLine: {
                normal: {
                  show: true,
                },
              },
              data: [
                { value: 335, name: "临终关怀" },
                { value: 310, name: "死亡恐惧" },
                { value: 234, name: "精神慰藉" },
              ],
            },
          ],
        },
        chart6: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          legend: {
            //图例
            orient: "horizontal", //图例的布局 vertical，竖直    horizontal为水平
            x: "center", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: ["感情辅导", "心理咨询", "亲人牵挂", "故乡情结"],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "占比",
              type: "pie", //环形图的type和饼图相同
              radius: ["55%", "85%"], //饼图的半径，第一个为内半径，第二个为外半径
              center: ["50%", "55%"],
              avoidLabelOverlap: false,
              color: ["#1791FF", "#FF8183", "#4DCC73", "#FCD438", "#EA82F1"],
              label: {
                normal: {
                  //正常的样式
                  position: "inner",
                  show: true,
                  formatter: "{b} \n {c} ({d}%)",
                },
                emphasis: {
                  // 选中时候的样式
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold",
                  },
                },
              }, //提示文字
              labelLine: {
                normal: {
                  show: true,
                },
              },
              data: [
                { value: 335, name: "感情辅导" },
                { value: 310, name: "心理咨询" },
                { value: 234, name: "亲人牵挂" },
                { value: 234, name: "故乡情结" },
              ],
            },
          ],
        },
        elder4: {},
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getMedicineData();
    },
    methods: {
      handleChange(value) {
        this.getMedicineData({time: value})
      },
      handleCommand(command) {
        this.$message("click on item " + command);
      },
      getMedicineData(data) {
        getMedicineData('get', data).then((resp) => {
          if (resp.code === 200) {
            let data = resp.data;
            console.log(data);
            let elder = data.ill;
            let ill = [];
            for (const key in elder) {
              if (elder.hasOwnProperty(key)) {
                const element = elder[key];
                ill.push(element);
              }
            }
            this.chart1.series[0].data = ill;

            let elder1 = data.ill1;
            let ill1 = [];
            let ill1xAxisData = [];
            for (const key in elder1) {
              if (elder1.hasOwnProperty(key)) {
                const element = elder1[key];
                ill1.push(element);
                ill1xAxisData.push(key);
              }
            }
            this.chart2.series[0].data = ill1;
            this.chart2.xAxis.data = ill1xAxisData;

            let elder2 = data.ill2;
            let ill2 = [];
            let ill2xAxisData = [];
            for (const key in elder2) {
              if (elder2.hasOwnProperty(key)) {
                const element = elder2[key];
                ill2.push(element);
                ill2xAxisData.push(key);
              }
            }
            this.chart3.series[0].data = ill2;
            this.chart3.xAxis.data = ill2xAxisData;

            let elder3 = data.ill3.elder;
            let elder3_num = data.ill3.num;
            let ill3 = [];
            let ill3_num = [];
            for (const key in elder3) {
              if (elder3.hasOwnProperty(key)) {
                const element = elder3[key];
                ill3.push(element);
              }
            }
            for (const key in elder3_num) {
              if (elder3.hasOwnProperty(key)) {
                const element = elder3_num[key];
                ill3_num.push(element);
              }
            }
            this.chart4.series[0].data = ill3;
            this.chart4.series[1].data = ill3_num;

            this.chart6.series[0].data[0].value = data.ill4["感情辅导"];
            this.chart6.series[1].data[0].value = data.ill4["心理咨询"];
            this.chart6.series[2].data[0].value = data.ill4["亲人牵挂"];
            this.chart6.series[3].data[0].value = data.ill4["故乡情结"];

            this.chart6.series[0].data[1].value =
              data.ill4["感情辅导"] +
              data.ill4["心理咨询"] +
              data.ill4["亲人牵挂"] +
              data.ill4["故乡情结"] +
              100;
            this.chart6.series[1].data[1].value =
              data.ill4["感情辅导"] +
              data.ill4["心理咨询"] +
              data.ill4["亲人牵挂"] +
              data.ill4["故乡情结"] +
              100;
            this.chart6.series[2].data[1].value =
              data.ill4["感情辅导"] +
              data.ill4["心理咨询"] +
              data.ill4["亲人牵挂"] +
              data.ill4["故乡情结"] +
              100;
            this.chart6.series[3].data[1].value =
              data.ill4["感情辅导"] +
              data.ill4["心理咨询"] +
              data.ill4["亲人牵挂"] +
              data.ill4["故乡情结"] +
              100;

            this.chart5.series[0].data[0].value = data.ill5["临终关怀"];
            this.chart5.series[1].data[0].value = data.ill5["死亡恐惧"];
            this.chart5.series[2].data[0].value = data.ill5["精神慰藉"];

            this.chart5.series[0].data[1].value =
              data.ill5["临终关怀"] +
              data.ill5["死亡恐惧"] +
              data.ill5["精神慰藉"] +
              100;
            this.chart5.series[1].data[1].value =
              data.ill5["临终关怀"] +
              data.ill5["死亡恐惧"] +
              data.ill5["精神慰藉"] +
              100;
            this.chart5.series[2].data[1].value =
              data.ill5["临终关怀"] +
              data.ill5["死亡恐惧"] +
              data.ill5["精神慰藉"] +
              100;
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 30px !important;
    margin: 0 !important;
    background: #001e44 !important;

    .el-card {
      background: none;
      background: rgba($color: #fff, $alpha: 0.1);
      border-color: #00e4ff;

      ::v-deep {
        .el-card__header {
          border-bottom: 1px solid #00e4ff;
        }
      }

      .title {
        font-size: 18px;
        color: #fff;
        cursor: pointer;

        h3 {
          font-weight: normal;
        }
      }

      .el-dropdown-link {
        font-size: 16px;
        color: #fff;
      }
    }
  }
</style>
